<template>
  <div class="container-page">
    <video class="demo-video" ref="player" muted autoplay></video>
  </div>
</template>
<script>
  import flvjs from "flv.js";
  export default {
    data() {
      return {
        id: "1",
		rtsp: "rtsp://127.0.0.1:8554/test",
        // rtsp: "rtsp://admin:dhlrw12345@127.0.0.1:8554/test",
        // rtsp: "rtsp://admin:dhlrw12345@192.168.0.101:554/h264/ch1/main/av_stream",
        player: null
      }
    },
    mounted() {
      if (flvjs.isSupported()) {
        let video = this.$refs.player;
        if (video) {
          this.player = flvjs.createPlayer({
            type: "flv",
            isLive: true,
            url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`
          });
          this.player.attachMediaElement(video);
          try {
            this.player.load();
            this.player.play();
          } catch (error) {
            console.log(error);
          };
        }
        // if (video) {
        //     this.player = flvjs.createPlayer({
        //         type: "flv",
        //         url: 'http://example.com/flv/video.flv'
        //     });
        //     this.player.attachMediaElement(video);
        //     try {
        //         this.player.load();
        //         this.player.play();
        //     } catch (error) {
        //         console.log(error);
        //     };
        // }
      }
    },
    beforeDestroy() {
      this.player.destory();
    }
  }
</script>
<style>
  .demo-video {
    max-width: 880px;
    max-height: 660px;
  }
</style>
